<!--
 	* @author  dumeng
-->
<template>
  <section class="reset-pwd">
    <header-back></header-back>
    <section class="form-body">
      <div class="reg">
        <p class="title">重置密码</p>
        <p class="sub-title">通过手机号重置</p>
        <div class="form">
          <yd-cell-group>
            <yd-cell-item>
              <yd-input slot="right" v-model.trim="form.phoneNumber" ref="mobile" required :show-success-icon="false" :show-error-icon="false" regex="mobile" placeholder="请输入手机号"></yd-input>
            </yd-cell-item>
            <yd-cell-item class="sms-code">
              <yd-input slot="left" v-model.trim="form.smsCode" required :max="6" :show-success-icon="false" :show-error-icon="false" :show-clear-icon="false" placeholder="请输入短信验证码"></yd-input>
              <section v-if="phonecodeshow" slot="right" class="identifying" @click="identifying">{{identifyingcodePhone}}</section>
              <section v-if="!phonecodeshow" slot="right" class="identifying">{{phonecount}}s后重新获取</section>
            </yd-cell-item>
            <yd-cell-item>
              <yd-input
                :class="{'iosPwd':(clientType != 'Android' && password.length>0)}"
                v-model.trim="password"
                slot="right"
                type="password"
                placeholder="请输入新密码"
                :show-clear-icon="false"
                :show-error-icon="false"
                :show-success-icon="false"
                :show-required-icon="false"
                min="8"
              ></yd-input>
            </yd-cell-item>
            <yd-cell-item>
              <yd-input
                :class="{'iosPwd':(clientType != 'Android' && confirmPassword.length>0)}"
                v-model.trim="confirmPassword"
                slot="right"
                placeholder="再次输入新密码"
                type="password"
                :show-clear-icon="false"
                :show-error-icon="false"
                :show-success-icon="false"
                :show-required-icon="false"
                min="8"
              ></yd-input>
            </yd-cell-item>
            <p class="tip">密码长度必须大于等于8位，必须包含大写字母、小写字母、数字、特殊字符中的3种。</p>
          </yd-cell-group>
        </div>

        <div class="btninterrelated">
          <yd-button size="large" type="primary" class="loginBtn" @click.native="nextStep">确定</yd-button>
        </div>
      </div>
    </section>
  </section>
</template>

<script>
	import url from './api'
	import headerBack from '@/components/headerback.vue'
	import blackImg from '@/assets/images/back-b.png'
	import { phone, password } from '@/common/validate'
	export default {
		components: { headerBack },
		name: "resetPwd",
		data: () => {
			return {
				backurl: '/login',
				blackImg: blackImg,
				clientType: localStorage.getItem('sys'),
				identifyingcodePhone: '发送验证码',
				phonecodeshow: true,
				phonecount: '',
				phonetimer: null,
				form: {
					phoneNumber: '',
					smsCode: '',
					smsType: 0
				},
				password: '',
				confirmPassword: ''
			}
		},
		methods: {
			/*
       * 表单验证
       * */
			PhoneVerify() {
				if (this.form.phoneNumber === '') {
					this.$dialog.toast({
						mes: '请输入手机号码！',
						timeout: 1500
					})
					return false
				}
				if (!phone(this.form.phoneNumber)) {
					this.$dialog.toast({
						mes: '请输入正确的手机号',
						timeout: 1500,
						icon: 'none'
					})
					return
				}
				return true
			},
			formVerify() {
				if (this.form.phoneNumber === '') {
					this.$dialog.toast({
						mes: '请输入手机号码！',
						timeout: 1500
					})
					return false
				}
				if (!phone(this.form.phoneNumber)) {
					this.$dialog.toast({
						mes: '请输入正确的手机号',
						timeout: 1500,
						icon: 'none'
					})
					return
				}
				if (this.form.smsCode === '') {
					this.$dialog.toast({
						mes: '请输入验证码！',
						timeout: 1500
					})
					return false
				}
				if (!password(this.password)) {
					this.$dialog.toast({
						mes: '密码长度必须大于等于8位。必须包含大写字母、小写字母、数字、特殊字符中的3种。',
						timeout: 1500,
						icon: 'none'
					})
					return false
				}
				if (!password(this.confirmPassword)) {
					this.$dialog.toast({
						mes: '密码长度必须大于等于8位。必须包含大写字母、小写字母、数字、特殊字符中的3种。',
						timeout: 1500,
						icon: 'none'
					})
					return false
				}
				if (this.password !== this.confirmPassword) {
					this.$dialog.toast({
						mes: '两次输入的密码不一致',
						timeout: 1500,
						icon: 'none'
					})
					return false
				}
				return true
			},

			/*
          * 下一步
          * */
			nextStep() {
				if (this.formVerify()) {
					this.$dialog.loading.open('请稍后...')
					const params = {
						phoneNumber: this.form.phoneNumber,
						smsCode: this.form.smsCode,
						newpwd: this.password,
						conpwd: this.confirmPassword,
						reqTime: new Date().Format('yyyy-MM-dd hh:mm:ss')
					}
					const signStr = JSON.stringify(params)// 仅处理
					const data = {
						param: this.$getRsaCode(signStr)
					}
					this.$axios.post(url.resetPassword, data).then(res => {
						this.$dialog.loading.close()
						if (res.code === '200') {
							if(res.data.type === '0') {
								this.$dialog.toast({
									mes: '修改成功',
									timeout: 1500,
									icon: 'success',
									callback: () => {
										this.$router.replace({ path: '/login' })
									}
								})
              } else if (res.data.type === '1') {
								this.$store.dispatch('setUnionList', res.data.list)
								this.$router.push(`/resetUnion?u=${res.data.uuid}`)
              }
						} else {
							this.$dialog.toast({
								mes: `${res.msg}` || '修改失败',
								timeout: 1500,
								icon: 'none'
							})
						}
					}).catch(() => {
						this.$dialog.loading.close()
						this.$dialog.toast({
							mes: '修改失败',
							timeout: 1500,
							icon: 'none'
						})
					})
				}
			},
			/**
			 * 0：密码重置   1：注册   2：修改手机号  3：修改邮箱，4：登录
			 * */
			identifying() {
				if (this.PhoneVerify()) {
					if (!this.codeTimer) {
						const _this = this
						const data = {
							phoneNumber: this.form.phoneNumber.trim(),
							reqTime: new Date().Format('yyyy-MM-dd hh:mm:ss')
						}
						const signStr = JSON.stringify(data)
						this.$dialog.loading.open('短信发送中...')
						this.$axios.post(url.sendcode, { param: this.$getRsaCode(signStr) }).then(res => {
							this.$dialog.loading.close()
							if (res.code && res.code === '200') {
								this.$dialog.toast({
									mes: '短信已发送，请注意查收！',
									timeout: 1500
								})
								const TIME_COUNT = 60
								if (!_this.phonetimer) {
									_this.phonecount = TIME_COUNT
									_this.phonecodeshow = false
									_this.phonetimer = setInterval(() => {
										if (_this.phonecount > 0 && _this.phonecount <= TIME_COUNT) {
											_this.phonecount--
										} else {
											_this.phonecodeshow = true
											clearInterval(_this.phonetimer)
											_this.phonetimer = null
										}
									}, 1000)
								}
							} else {
								this.$dialog.toast({
									mes: res.msg || '验证码发送失败，请重新发送',
									timeout: 1500
								})
							}
						}).catch(() => {
							this.$dialog.loading.close()
							this.phonecodeshow = true
							clearInterval(this.phonetimer)
							this.phonetimer = null
						})
					}
				}
			}

		},
    created() {
			console.log(111)
    }
	}
</script>

<style lang="scss">
  .reset-pwd {
    width: 100%;
    height: 100%;
    position: relative;
    overflow-x: hidden;
    background: linear-gradient(0deg, #eff0f4 0%, #f2f3f6 100%);
    .closeLogin {
      background-color: transparent;
    }
    .form-body {
      position: absolute;
      bottom: 0;
      left: 0;
      top: rem(80);
      right: 0;
      overflow: auto;
      margin-top: rem(30);
      -webkit-overflow-scrolling: touch;
    }

    .reg {
      .title {
        font-size: rem(44);
        font-weight: 600;
        color: rgba(0, 0, 0, 1);
        margin-left: rem(65);
      }
      .sub-title {
        font-size: rem(26);
        font-weight: 400;
        margin-top: rem(24);
        color: rgba(165, 165, 165, 1);
        margin-left: rem(65);
      }
      .title {
        font-size: rem(44);
        font-weight: 600;
        color: rgba(0, 0, 0, 1);
        margin-left: rem(69);
      }
      .form {
        .tip {
          font-size: rem(20);
          color: #999;
          padding-left: rem(10);
          margin-top: rem(-20);
        }
        padding: 0 rem(65);
        margin-top: rem(60);
        .identifying {
          width: rem(200);
          font-size: rem(28);
          @include font-color($mainColor);
        }
        .yd-cell {
          background-color: transparent;
        }
        .yd-cell-item {
          padding-left: 0;
          margin-bottom: rem(40);
          height: rem(88);
          background: #ffffff;
          border-radius: rem(44);
          padding: 0 rem(35);
        }
        .sms-code {
          .yd-cell-left {
            width: rem(250);
            flex: 0 0 auto;
          }
        }
        .yd-cell-right {
          padding-right: 0;
          flex-shrink: 0;
        }
        .yd-cell-item:after {
          display: none;
        }
        .yd-cell:after {
          display: none;
        }
        .yd-input-password-open:after {
          color: #a6a6a6;
        }
        .yd-input-clear:after {
          font-size: rem(30);
          color: #ccc;
        }
        input {
          font-size: rem(32);
          font-family: PingFang SC;
          color: #333;
          border: none;
          font-weight: bold;
        }
        input::-webkit-input-placeholder {
          font-size: rem(30);
          font-family: PingFang SC;
          font-weight: 400;
          color: #a6a6a6;
        }
        .iosPwd {
          input[type='password'] {
            font-size: rem(32);
            &::placeholder {
              font-size: rem(30);
            }
          }
        }
      }
      .btninterrelated {
        .loginBtn {
          width: rem(610);
          height: rem(88);
          @include bg-color($mainColor);
          border-radius: rem(44);
          font-size: rem(32);
          color: rgba(255, 255, 255, 1);
          margin: 0 auto;
          margin-top: rem(60);
          margin-bottom: rem(35);
          font-family: PingFang SC;
          font-weight: 400;
        }
      }
    }
  }
</style>